import React from 'react';

// 使用 Context API 实现跨组件传值
const { Provider, Consumer } = React.createContext();

export class App extends React.Component {
  render() {
    return (
      <Provider value={<h1>xxx</h1>}>
        <div style={{ border: '1px solid red', padding: 12 }}>
          <h2>我是App组件</h2>
          <Node />
        </div>
      </Provider>
    );
  }
}

const Node = () => (
  <div style={{ border: '1px solid green', padding: 12 }}>
    <h2>Node</h2>
    <SubNode />
  </div>
);

const SubNode = () => (
  <div style={{ border: '1px solid blue', padding: 12 }}>
    <h2>SubNode</h2>
    <Consumer>{(value) => <>{value}</>}</Consumer>
    <Child />
  </div>
);

const Child = () => (
  <div style={{ border: '1px solid green', padding: 12 }}>
    <h2>Child</h2>
    <Consumer>{(value) => <>{value}</>}</Consumer>
  </div>
);
